<template>
  <div class="index-container">
    <DownloadApp></DownloadApp>

    <!-- 顶部轮播图 -->
    <div class="banner">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="(item, index) in homeList.banners.home_top" :key="index">
          <img :src="item.image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 金刚区 -->
    <van-grid :gutter="15" class="icons">
      <van-grid-item
        v-for="(item, index) in kongList"
        :key="index"
        :icon="item.icon"
        :text="item.name"
        @click="handleKong(item.name)"
      />
    </van-grid>

    <!-- 热门模块 -->
    <div class="head_news">
      <router-link class="img" :to="{ name: 'RegisterGuide', query: { subject_id: 2 } }">
        <img :src="require('@/assets/images/home_head_new1.png')" alt />
      </router-link>
      <router-link class="img" :to="{ name: 'ContactUs' }">
        <img :src="require('@/assets/images/home_head_new2.png')" alt />
      </router-link>
    </div>

    <van-divider />

    <!-- 热门活动 -->
    <div class="hots">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/hot.png')" />
          <i class="ml5">热门活动</i>
        </span>
        <span class="h_right">
          查看更多
          <van-icon name="arrow" />
        </span>
      </div>

      <van-grid :gutter="15" :border="false" :column-num="2">
        <van-grid-item
          v-show="index < 4"
          v-for="(item, index) in homeList.hotOpens"
          :key="index"
          @click="toGoodsInfo(item)"
        >
          <van-image width="100%" height="105" :src="item.cover" />
          <div class="content">
            <h3 class="title textoverflow1">{{ item.name }}</h3>
            <div class="jiage">
              抢购价:
              <span>
                <i>¥</i>
                <i style="font-size: 18px">{{ item.price }}</i>
              </span>
            </div>
            <div class="xuexi">{{ item.init_view_num }}人已学习</div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <van-divider />

    <!-- 精品直播课 -->
    <div class="live">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml5">精品直播课</i>
        </span>
      </div>

      <van-tabs :swipe-threshold="1" v-model="active" swipeable>
        <van-tab v-for="(item, index) in courseList" :key="index" :title="item.name">
          <div class="headline_three main clearfix">
            <div
              class="headline_three_banxing"
              v-for="(item, index1) in homeList.hotOpens"
              :key="index1"
              v-show="index1 < 4"
            >
              <div class="banxing">
                <div class="imgs">
                  <img v-lazy="item.cover" alt />
                </div>
                <div>
                  <div class="banxing_title">2022年临床公开课—心电图/ 影像学上手难？11111111111111111111</div>
                  <div class="banxing_button">
                    <van-icon :name="require('@/assets/images/live.gif')" />
                    <i class="ml5">2022-04-23 19:00</i>
                  </div>
                  <van-button>直播回放</van-button>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="see_more">
        点击查看全部
        <van-icon name="arrow-down" />
      </div>
    </div>

    <van-divider />

    <!-- 名师团 -->
    <div class="teacher">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml5">名师团队</i>
        </span>
        <router-link :to="{ name: 'Teachers' }" class="h_right">
          查看更多
          <van-icon name="arrow" />
        </router-link>
      </div>
      <div class="pack_live">
        <van-swipe :loop="false" :width="290" :show-indicators="false">
          <van-swipe-item
            v-for="(item, index) in homeList.teachers"
            :key="index"
            @click="toTeachersInfo(item)"
          >
            <div class="pack_live_left">
              <img :src="item.avatar" class="pack_live_touxiang" />
              <div style="padding-left: 12px">
                <div class="pack_live_name">{{ item.name }}</div>
                <div class="pack_live_name1">{{ item.cert }}</div>
              </div>
            </div>
            <div class="pack_live_content">{{ item.intro }}</div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <van-divider />

    <!-- 最新资讯 -->
    <div class="hot_news">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml5">最新资讯</i>
        </span>
      </div>
      <ul>
        <li v-for="(item, index) in homeList.news" :key="index">
          <van-icon :name="require('@/assets/images/home_hot_news.png')" />
          <router-link
            :to="{ path: '/information-details', query: { id: item.id, subject_id: item.subject_map[0] } }"
          >{{ item.title }}</router-link>
        </li>
      </ul>
    </div>

    <van-divider />

    <!-- 王派特色 -->
    <div class="feature">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml5">王派特色</i>
        </span>
      </div>
      <div class="feature_box">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="(item, index) in wptsList" :key="index">
            <div class="img_box">
              <img :src="item.img" />
            </div>
            <div class="base">{{ item.name }}</div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <van-divider />

    <!-- 真情反馈 -->
    <div class="feedback">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml5">真情反馈</i>
        </span>
      </div>
      <van-swipe :autoplay="3000" lazy-render :width="windowWidth">
        <van-swipe-item v-for="(item, index) in homeList.banners.true_feedback" :key="index">
          <img :src="item.image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-divider style="margin-bottom: 0px" />

    <!-- 招商加盟 -->
    <div class="join">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml5">招商加盟</i>
        </span>
      </div>
      <div class="box">
        <ul>
          <li>负责人：张瀞匀</li>
          <li>电 话：13167516672</li>
          <li>地 址：北京海淀区中关村科技发展大厦705</li>
        </ul>
        <div class="ewm">
          <img
            src="https://wangpai-static.oss-cn-beijing.aliyuncs.com/2022-01-25/8714e0be0eb13da35dec4e5e0843711a.jpg"
            alt
          />
          <div>微信二维码</div>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>
        <a
          href="https://beian.miit.gov.cn/#/Integrated/index"
          target="blank"
          title="Copyright © 2018 | 王派医学 | 鄂ICP备18002255号增值电信业务经营许可证：鄂B2-20200229"
        >Copyright © 2018 | 王派医学 | 鄂ICP备18002255号 增值电信业务经营许可证：鄂B2-20200229</a>
        &nbsp;|&nbsp;
        <!-- <a
          href="http://www.beian.gov.cn/portal/index"
          target="blank"
          title="网站地图"
        >网站地图</a>&nbsp;|&nbsp;-->
        <a
          href="http://www.beian.gov.cn/portal/index"
          target="blank"
          title="鄂公网安备 42018502004629号"
        >鄂公网安备 42018502004629号</a>
      </p>
      <div class="imgs">
        <img
          :src="require('@/assets/images/home_footer.png')"
          title="行业认证 全国安全可信网站"
          alt="行业认证 全国安全可信网站"
        />
      </div>
    </div>

    <!--选择科目 -->
    <div class="subject_popup">
      <van-popup v-model="showKong" closeable position="bottom">
        <h3>请选择科目</h3>
        <div class="box">
          <van-button @click="subjectClick(item)" v-for="(item, index) in kongData" :key="index">
            {{
            item.name
            }}
          </van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import DownloadApp from '@/components/DownloadApp'
import { handleTree } from '@/utils'
import { getHome } from '@/api/home/index'
export default {
  components: {
    DownloadApp
  },
  data() {
    return {
      loading: false,
      homeList: {
        banners: {},
        hotOpens: [],
        news: [],
        subjects: [],
        teachers: []
      },
      // 选择科目
      catesList: [],
      kongList: [
        { name: '医师资格', icon: require('@/assets/images/home_kong_1.png') },
        { name: '执业药师', icon: require('@/assets/images/home_kong_2.png') },
        { name: '护士护师', icon: require('@/assets/images/home_kong_3.png') },
        { name: '主治医师', icon: require('@/assets/images/home_kong_4.png') },
        { name: '医学考研', icon: require('@/assets/images/home_kong_5.png') },
        { name: '健康管理', icon: require('@/assets/images/home_kong_6.png') },
        { name: '在线题库', icon: require('@/assets/images/home_kong_7.png') },
        { name: '图书商城', icon: require('@/assets/images/home_kong_8.png') }
      ],
      // 精品直播选择
      courseList: [
        { name: '临床', mark: 'lczy|lczl', class: 'course-ico1' },
        { name: '乡村', mark: 'xcqk', class: 'course-ico2' },
        { name: '中医', mark: 'zyzy|zyzl', class: 'course-ico3' },
        { name: '中西医', mark: 'zxyzy|zxyzl', class: 'course-ico4' },
        { name: '口腔', mark: 'kqzy|kqzl', class: 'course-ico5' },
        { name: '中药师', mark: 'zys', class: 'course-ico6' },
        { name: '西药师', mark: 'xys', class: 'course-ico7' },
        { name: '临床主治', mark: 'lcnk|lcwk|lcqk', class: 'course-ico8' },
        { name: '健康管理师', mark: 'jkgls', class: 'course-ico9' },
        { name: '护士', mark: 'hszg', class: 'course-ico10' }
      ],
      showKong: false,
      kongData: [],
      active: 0,
      subjectList: [],
      wptsList: [
        { name: '专业的医师团队', class: 'wpts-c1-ico1', img: require('../../assets/images/ts_td.gif') },
        { name: '高效的授课方法', class: 'wpts-c1-ico2', img: require('../../assets/images/ts_gx.png') },
        { name: '科学的教学体系', class: 'wpts-c1-ico3', img: require('../../assets/images/ts_tx.png') },
        { name: '精炼的辅导资料', class: 'wpts-c1-ico4', img: require('../../assets/images/ts_zl.png') },
        { name: '贴心的教辅服务', class: 'wpts-c1-ico5', img: require('../../assets/images/ts_fw.png') },
        { name: '温馨的学习氛围', class: 'wpts-c1-ico6', img: require('../../assets/images/ts_fwei.png') },
        { name: '全天候在线答疑', class: 'wpts-c1-ico7', img: require('../../assets/images/ts_dy.png') }
      ],
      windowWidth: document.documentElement.clientWidth / 2
    }
  },
  computed: {},
  mounted() {
    this.fetchList()
  },
  methods: {
    // 获取首页数据
    fetchList() {
      this.loading = true
      getHome().then(res => {
        this.homeList = res.data
        this.catesList = handleTree(res.data.subjects)
        console.log(this.catesList)
      })
      // .finally(_ => {
      //   this.loading = false
      // })
    },
    // 点击金刚区
    handleKong(row) {
      this.catesList.forEach(b => {
        if (b.name == row) {
          this.kongData = b.children
          this.showKong = true
        }
      })
    },
    // 选择子科目
    subjectClick(row) {
      this.$router.push({ path: '/course-home', query: { subject_id: row.id } })
    },
    // 点击跳转课程详情
    toGoodsInfo(row) {
      const path = row.type === 'pack' ? '/pack-details' : row.type === 'open' ? '/open-details' : '/free-details'
      const news = this.$router.resolve({
        path: path,
        query: { id: row.id, subject_id: this.$route.query.subject_id }
      })
      window.open(news.href, '_blank')
    },
    // 名师团队
    toTeachersInfo(row) {
      this.$router.push({ name: 'TeachersInfo', query: row })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  // padding-bottom: 85px;
  background: #ffffff;
  .banner {
    .van-swipe {
      height: 140px;
      margin: 10px 15px 0px;
      border-radius: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  ::v-deep .van-grid {
    margin-top: 15px;
    .van-grid-item__content {
      padding: 0;
    }
    .van-icon__image {
      width: 45px;
      height: 45px;
      border-radius: 15px;
    }
    .van-grid-item__text {
      margin: 5px 0 0 0;
      font-size: 13px;
      font-weight: 400;
      color: #353535;
    }

    .van-grid-item__content--surround::after {
      border: none;
    }
  }

  .head_news {
    margin-top: 15px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    .img {
      width: 48%;
      height: 63px;
      background: linear-gradient(93deg, #f6ffff, #ffffff);
      border-radius: 5px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }

  .hots {
    // padding: 0 30px;
    .van-grid {
      margin-top: 17px;
      .van-grid-item {
        box-shadow: 0px 1.5px 4px 0px rgba(210, 212, 213, 0.2);
        border-radius: 5px;
      }
      .van-grid-item__content {
        box-shadow: 0px 1px 4px 0px rgba(210, 212, 213, 0.2);
        border-radius: 5px;
        overflow: hidden;
      }
      .content {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px 10px;
        .title {
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          line-height: 21px;
        }
        .jiage {
          font-size: 12px;
          color: #009697;
          line-height: 30px;
        }
        .xuexi {
          display: table;
          // margin-top: 10px;
          min-width: 75px;
          padding: 0 5px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #11a8a4;
          background: rgba(7, 120, 121, 0.1);
          border-radius: 2px;
        }
        .van-button {
          width: 27px;
          height: 14px;
          background: #fd953f;
          padding: 0;
          vertical-align: bottom;
          .van-button__text {
            font-size: 14px;
            font-weight: bold;
            color: #fffefe;
          }
        }
        .open_price {
          font-size: 9px;
          font-weight: 800;
          color: #009697;
          // line-height: 30px;
        }
        .open_number {
          margin-left: 4px;
          line-height: 14px;
          font-size: 6px;
          font-weight: 500;
          text-decoration: line-through;
          color: #999999;
        }
      }
    }
  }

  .live {
    ::v-deep .van-tabs {
      margin-top: 10px;
      .van-tabs__nav--line.van-tabs__nav--complete {
        padding-left: 10px;
      }
      .van-tabs--line .van-tabs__wrap {
        height: 20px;
      }
      .van-tab {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
      }
      .van-tab--active {
        font-size: 16px;
        font-weight: 800;
        color: #333333;
      }
      .van-tabs__line {
        height: 2px;
        background: #009697;
        border-radius: 1px;
      }
    }
    .headline_three {
      margin: 15px 15px 0;
      .headline_three_banxing {
        margin-bottom: 25px;
      }
      .banxing {
        display: flex;
        .imgs {
          margin-right: 13px;
          img {
            width: 147px;
            height: 95px;
            border-radius: 1px;
            overflow: hidden;
          }
        }
      }

      .banxing_title {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 19px;
        @include textoverflow(2);
      }
      .banxing_button {
        .van-icon {
          vertical-align: text-top;
        }
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
      }
      .van-button {
        display: table;
        width: 117px;
        height: 27px;
        background: #009697;
        border-radius: 14px;
        font-size: 13px;
        font-weight: 400;
        color: #ffffff;
        line-height: 30px;
      }
    }

    .see_more {
      margin: auto;
      width: 72px;
      text-align: center;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }

  .teacher {
    // 金牌讲师
    ::v-deep .pack_live {
      margin-bottom: 12px;
      .van-swipe__track {
        margin: 0 0 0 15px;
      }
      .van-swipe-item {
        // display: flex;
        box-sizing: border-box;
        // width: 290px !important;
        height: 182px;
        padding: 15px;
        background: url('../../assets/images/home_teacher_box.png');
        background-size: 100% 100%;
        border-radius: 5px;
        .pack_live_left {
          display: flex;
          .pack_live_touxiang {
            width: 66px;
            height: 66px;
            border-radius: 50%;
          }
          .pack_live_name {
            font-size: 14px;
            font-weight: 600;
            color: #333333;
            line-height: 38px;
          }
          .pack_live_name1 {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 18px;
          }
        }
        .pack_live_content {
          margin-top: 12px;
          font-size: 13px;
          font-weight: 400;
          color: #666666;
          line-height: 22px;
          @include textoverflow(3);
        }
      }
    }
  }

  .hot_news {
    ul {
      margin: 0 35px 0 15px;
      li {
        .van-icon {
          font-size: 8px;
          margin-right: 10px;
        }
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 37px;
        @include textoverflow();
      }
      a {
        color: #333333;
      }
    }
  }

  .feature {
    .feature_box {
      margin: 15px 15px 0;
      ::v-deep .van-swipe {
        border-radius: 5px;
        .img_box {
          width: 100%;
          height: 200px;
        }
        img {
          width: 100%;
          height: 100%;
        }
        .base {
          height: 34px;
          padding: 0 10px;
          line-height: 35px;
          font-size: 15px;
          font-weight: 600;
          color: #ffffff;
          background: linear-gradient(-90deg, #37aa96, #009697);
        }
        .van-swipe__indicators {
          bottom: 14px;
          right: -25px;
          left: auto;
        }
        .van-swipe__indicator {
          width: 6px;
          height: 6px;
        }
        .van-swipe__indicator {
          background: #71c8bc;
        }
        .van-swipe__indicator--active {
          background: #ffffff;
        }
      }
    }
  }

  .feedback {
    .van-swipe {
      height: 283px;
      margin-top: 20px;
      .van-swipe-item {
        width: 50%;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .join {
    min-height: 143px;
    padding: 15px 0;
    background: linear-gradient(0deg, #f5ffff, #ffffff);
    @include clearfix;
    .box {
      margin-top: 10px;
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      ul {
        margin-right: 20px;
        li {
          font-size: 13px;
          font-weight: 400;
          color: #333333;
          line-height: 25px;
        }
      }
    }
    .ewm {
      width: 65px;
      height: 70px;
      padding: 5px;
      text-align: center;
      font-size: 6px;
      font-weight: bold;
      border: 0.5px solid #def3f3;
      img {
        width: 55px;
        height: 55px;
      }
    }
  }

  .footer {
    height: 167px;
    box-sizing: border-box;
    padding: 25px;
    background: #20222c;
    font-size: 12px;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 400;
    color: #cccccc;
    line-height: 26px;
    a {
      color: #cccccc;
    }
    .imgs {
      margin: 10px auto 0;
      width: 85%;
    }
  }

  .subject_popup {
    .van-popup {
      min-height: 150px;
      border-radius: 10px 10px 0px 0px;
      padding-bottom: 25px;
      h3 {
        margin-top: 25px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }
      .box {
        margin-top: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .van-button {
          width: 105px;
          height: 40px;
          margin-bottom: 15px;
          background: #ffffff;
          border: 0.5px solid #e0e0e0;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
        .van-button:active {
          background: #009697;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
